import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { HeaderWrapper } from "./style";
import { LOGO_URL } from "../../common/contants";
import { headerLinks } from "../../common/local-data";
import { NavLink } from "react-router-dom";
import { Input } from "antd";
import { SearchOutlined, FormOutlined ,DownOutlined} from "@ant-design/icons";
import { setUserDetailAction } from "@/store/public-store/actionCreators";
import { Button, Radio } from "antd";
import { useToken } from "@/hooks/index";
import { Link, useHistory } from "react-router-dom";
import { Avatar,Menu, Dropdown,  Space } from "antd";
import { UserOutlined } from "@ant-design/icons";
import UserMenu from './child/menu'

export default memo(function AppHeader() {
  let { userDetail } = useSelector(
    (state) => ({
      userDetail: state.getIn(["public", "userDetail"]),
    }),
    shallowEqual
  );
  console.log(userDetail);
  const dispatch = useDispatch();
  const history = useHistory();
  const SetUserDetail = async () => {
    const token = await useToken();
    if (token) {
      dispatch(setUserDetailAction(token));
    }
  };
  useEffect(() => {
    SetUserDetail();
  }, []);

  const user = () => {
    console.log(1);
    history.push("/user");
  };

  const loginClick = () => {
    history.push("/login");
  };

  const register=()=>{
    window.open("https://www.heart1.top/#/registered");
  }
 

 
  return (
    <HeaderWrapper>
      <div className="header">
        <div className="nav-bar">
          <div className="logo">
            <img src={LOGO_URL} alt="" />
          </div>

          <div className="tab-control">
            {headerLinks.map((item, index) => {
              return (
                <div key={item.title} className="item">
                  <NavLink to={item.link}>
                    <i className={"iconfont " + item.icon}></i>
                    {item.title}
                  </NavLink>
                </div>
              );
            })}
          </div>
        </div>

        <div className="main-bar">
          <div className="search">
            <Input
              className="search_btn"
              allowClear="true"
              placeholder="长安一片月..."
              prefix={<SearchOutlined />}
            />
          </div>

          <div className="write">
            <Button
              type="primary"
              shape="round"
              icon={<FormOutlined />}
              size="middle"
            >
              <Link
                to={`/write?uid=${userDetail.id}`}
                className="write_article"
                target="_blank"
                type=""
                href=""
              >
                写文章
              </Link>
            </Button>
          </div>

          <div className="user">
            {Object.keys(userDetail).length > 0 ? (
              <div>
                <Avatar
                  className='avatar'
                  onClick={() => user()}
                  size={32}
                  draggable={true}
                  src={userDetail.avatarUrl}
                />
                <Dropdown overlay={UserMenu} placement="bottomCenter">
                    <DownOutlined />
                </Dropdown>
              </div>
            ) : (
              <div className="login-btn-box">
                <div onClick={()=>register()}>注册</div>
                <div
                  onClick={() => {
                    loginClick();
                  }}
                >
                  登录
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </HeaderWrapper>
  );
});
